<template>
	<section class="home-index">
		<!-- S 首屏-动画 -->
		<div v-show="activeTab === 'top'" class="content-top" @mouseover="handleMouseoverMenuItem">
			<div v-show="showSkipAnimationBtn" class="btn-skip-animation" @click="handleSkipAnimation">跳过动画</div>
			<!-- /头部导航条 -->

			<iframe :src="iframeSrc" class="top-cont" frameborder="0"></iframe>
			<!-- /首屏动画区域 -->

			<div ref="rTopMenu" class="top-menu">
				<div class="menu-content">
					<div class="fixed-box" @mouseover="handleMouseoverMenuItem">
						<div
							ref="rMenuItem"
							v-for="item in menuItemList"
							:key="item.title"
							:class="{ 'menu-item': true, active: item.title === activeMenu.title }"
						>
					
							<p class="menu-item-title">{{ isChinese ? item.title : item.subtitle }}</p>
							<p class="menu-item-subtitle">{{ !isChinese ? item.title : item.subtitle }}</p>
						</div>
					</div>
					<div ref="rFixedLineTop" class="fixed-line-top"></div>
					<div ref="rFixedLineMiddle" class="fixed-line-middle"></div>
					<div class="fixed-bottom"></div>
				</div>
				<!-- <div :class="{ 'menu-toggle': true, active: true }"> -->
				<div :class="{ 'menu-toggle': true, active: showMenuToggle }">
					<div class="toggle-title">
						<span class="title-big">{{ isChinese ? activeMenu.title : activeMenu.subtitle }}</span>
						<span class="title-small">{{ !isChinese ? activeMenu.title : activeMenu.subtitle }}</span>
					</div>
					<div class="toggle-content">
						<!-- TUDO-start -->
						<div v-show="activeMenu.subtitle === 'Industrial Applications'" class="app-menu">
							<div
								v-for="(itemType, index) in applicationTypes"
								:key="itemType.title"
								class="app-menu-wrap"
								:style="{ width: isChinese ? '270px' : '370px' }"
							>
								<div class="menu-type">{{  isChinese ? itemType.title : itemType.subtitle }}</div>
								<div class="menu-title-wrap">
									<button
										v-for="item in filterSUbtypes(index)"
										:key="item.id"
										:disabled="!item.link"
										:title="showItemRouterTooltip(item)"
										class="menu-title"
										@click="
                    goToPathRuoYi(
                      item.link,
                      item.cookie,
                      item.subitemName,
                      item,
                      'top'
                    )
                  "
									>
										<template v-if="!!item.link && item.linkAuthFlag === 0">
											<el-tooltip class="item" effect="dark" :content="accessContent" placement="top">
												<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
											</el-tooltip>
										</template>
										<template v-else>
											<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
										</template>
									</button>
								</div>
							</div>
						</div>
						<!-- TUDO-end -->
						<!-- /首屏高级应用 -->

						<div v-show="activeMenu.subtitle === 'Data Middle Platform'" class="other-menu">
							<!-- :class 'menu-title-diff': item.subitemName === '设备对象构建' -->
							<button
								v-for="item in linksData"
								:key="item.id"
								:disabled="!item.link"
								:title="showItemRouterTooltip(item)"
								:class="{'menu-title': true}"
								@click.stop="goToPath(item, 'top')"
							>
								<template v-if="!!item.link && item.linkAuthFlag === 0">
									<el-tooltip class="item" effect="dark" :content="accessContent" placement="top">
										<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
									</el-tooltip>
								</template>
								<template v-else>
									<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
								</template>
							</button>
						</div>
						<!-- /首屏数据中台 -->

						<div v-show="activeMenu.subtitle === 'Technical Middle Platform'" class="other-menu">
							<button
								v-for="item in linksTechnology"
								:key="item.id"
								:disabled="!item.link"
								:title="showItemRouterTooltip(item)"
								class="menu-title"
								@click="goToPath(item, 'top')"
							>
								<template v-if="!!item.link && item.linkAuthFlag === 0">
									<el-tooltip class="item" effect="dark" :content="accessContent" placement="top">
										<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
									</el-tooltip>
								</template>
								<template v-else>
									<el-tooltip
										v-if="(item.subitemName == 'FMEA配置' || item.subitemName == 'FTA配置') && isChinese"
										:content="item.subitemName == 'FMEA配置' ? '失效模式与影响分析（FMEA）配置' : '故障树分析（FTA）配置'"
										placement="top"
									>
										<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
									</el-tooltip>
									<span v-else class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
								</template>
							</button>
						</div>
						<!-- /首屏技术中台 -->

						<div v-show="activeMenu.subtitle === 'Business Middle Platform'" class="other-menu">
							<button
								v-for="item in linksBusiness"
								:key="item.id"
								:disabled="!item.link"
								:title="showItemRouterTooltip(item)"
								class="menu-title"
								@click="goToPath(item, 'top')"
							>
								<template v-if="!!item.link && item.linkAuthFlag === 0">
									<el-tooltip class="item" effect="dark" :content="accessContent" placement="top">
										<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
									</el-tooltip>
								</template>
								<template v-else>
									<el-tooltip
										v-if="(item.subitemName == 'FMEA库' || item.subitemName == 'FTA库') && isChinese"
										:content="item.subitemName == 'FMEA库' ? '失效模式与影响分析（FMEA）库' : '故障树分析（FTA）库'"
										placement="top"
									>
										<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
									</el-tooltip>
									<span v-else class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
								</template>
							</button>
						</div>
						<!-- /首屏业务中台 -->

						<div v-show="activeMenu.subtitle === 'Control Center'" class="other-menu">
							<button
								v-for="item in linksCloud"
								:key="item.id"
								:disabled="!item.link"
								:title="showItemRouterTooltip(item)"
								class="menu-title"
								@click="goToPath(item, 'top')"
							>
								<template v-if="!!item.link && item.linkAuthFlag === 0">
									<el-tooltip class="item" effect="dark" :content="accessContent" placement="top">
										<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
									</el-tooltip>
								</template>
								<template v-else>
									<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
								</template>
							</button>
						</div>
						<!-- /首屏管控中心 -->

						<div v-show="activeMenu.subtitle === 'Resource Application'" class="other-menu">
							<button
								v-for="item in linksResources"
								:key="item.id"
								:disabled="!item.link"
								:title="showItemRouterTooltip(item)"
								class="menu-title"
								@click="goToPath(item, 'top')"
							>
								<template v-if="!!item.link && item.linkAuthFlag === 0">
									<el-tooltip class="item" effect="dark" :content="accessContent" placement="top">
										<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
									</el-tooltip>
								</template>
								<template v-else>
									<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
								</template>
							</button>
						</div>
						<!-- /首屏资源申请 -->
					</div>
				</div>
			</div>
			<!-- /底部导航区域 -->
		</div>
		<!-- E 首屏-动画 -->

		<!-- S 第二屏-分类导航 -->
		<div v-show="activeTab === 'bottom'" :class="{'content-bottom': true, 'is-english': !this.isChinese}">
			<div class="wrap-sec sec-one">
				<div class="sec-title">SaaS</div>
				<div class="sec-content">
					<p class="item-title">{{ chineseOrEnglishName('高级应用') }}</p>
					<div class="item-content">
						<div
							v-for="(itemType, index) in applicationTypes"
							:key="itemType.title"
							:class="{'app-type': true, 'is-diff': currentDomainName === '葛洲坝电站'}"
						>
							<p class="type-title">{{ isChinese ? itemType.title : itemType.subtitle }}</p>
							<div class="type-wrap">
								<button
									v-for="item in filterSUbtypes(index, true)"
									:key="item.id"
									:disabled="!item.link || hasJurisdiction(item)"
									:title="showItemRouterTooltip(item)"
									:class="{ 'item-router': true, 'short-btn': filterSUbtypes(index, true).length === 3}"
									@click="
                    goToPathRuoYi(
                      item.link,
                      item.cookie,
                      item.subitemName,
                      item,
                      'bottom'
                    )
                  "
								>
									<template v-if="!!item.link && item.linkAuthFlag === 0">
										<el-tooltip class="item" effect="dark" :content="accessContent" placement="top">
											<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
										</el-tooltip>
									</template>
									<template v-else>
										<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
									</template>
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="wrap-sec sec-two">
				<div class="sec-title">PaaS</div>
				<div class="sec-content">
					<div class="two-left-wrap">
						<p class="item-title">{{ chineseOrEnglishName('技术中台') }}</p>
						<div class="item-content">
							<button
								v-for="item in linksTechnology"
								:key="item.id"
								:disabled="!item.link || hasJurisdiction(item)"
								:title="showItemRouterTooltip(item)"
								class="item-router"
								@click="goToPath(item, 'bottom')"
							>
								<template v-if="!!item.link && item.linkAuthFlag === 0">
									<el-tooltip class="item" effect="dark" :content="accessContent" placement="top">
										<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
									</el-tooltip>
								</template>
								<template v-else>
									<el-tooltip
										v-if="(item.subitemName == 'FMEA配置' || item.subitemName == 'FTA配置') && isChinese"
										:content="item.subitemName == 'FMEA配置' ? '失效模式与影响分析（FMEA）配置' : '故障树分析（FTA）配置'"
										placement="top"
									>
										<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
									</el-tooltip>
									<span v-else class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
								</template>
							</button>
						</div>
					</div>
					<div class="two-center-wrap">
						<div class="center-top-wrap">
							<p class="item-title">{{ chineseOrEnglishName('业务中台') }}</p>
							<div class="item-content">
								<button
									v-for="item in linksBusiness"
									:key="item.id"
									:disabled="!item.link || hasJurisdiction(item)"
									:title="showItemRouterTooltip(item)"
									class="item-router"
									@click="goToPath(item, 'bottom')"
								>
									<template v-if="!!item.link && item.linkAuthFlag === 0">
										<el-tooltip class="item" effect="dark" :content="accessContent" placement="top">
											<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
										</el-tooltip>
									</template>
									<template v-else>
										<el-tooltip
											v-if="(item.subitemName == 'FMEA库' || item.subitemName == 'FTA库') && isChinese"
											:content="item.subitemName == 'FMEA库' ? '失效模式与影响分析（FMEA）库' : '故障树分析（FTA）库'"
											placement="top"
										>
											<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
										</el-tooltip>
										<span v-else class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
									</template>
								</button>
							</div>
						</div>
						<div class="center-bottom-wrap">
							<p class="item-title">{{ chineseOrEnglishName('数据中台') }}</p>
							<div class="item-content">
								<button
									v-for="item in linksData"
									:key="item.id"
									:disabled="!item.link || hasJurisdiction(item)"
									:title="showItemRouterTooltip(item)"
									:class="{ 'item-router': true }"
									@click.stop="goToPath(item, 'bottom')"
								>
									<template v-if="!!item.link && item.linkAuthFlag === 0">
										<el-tooltip class="item" effect="dark" :content="accessContent" placement="top">
											<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
										</el-tooltip>
									</template>
									<template v-else>
										<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
									</template>
								</button>
							</div>
						</div>
					</div>
					<div class="two-right-wrap">
						<p class="item-title">{{ chineseOrEnglishName('管控中心') }}</p>
						<div class="item-content">
							<button
								v-for="item in linksCloud"
								:key="item.id"
								:disabled="!item.link || hasJurisdiction(item)"
								:title="showItemRouterTooltip(item)"
								class="item-router"
								@click="goToPath(item, 'bottom')"
							>
								<template v-if="!!item.link && item.linkAuthFlag === 0">
									<el-tooltip class="item" effect="dark" :content="accessContent" placement="top">
										<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
									</el-tooltip>
								</template>
								<template v-else>
									<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
								</template>
							</button>
						</div>
					</div>
				</div>
			</div>
			<div class="wrap-sec sec-three">
				<div class="sec-title">IaaS</div>
				<div class="sec-content">
					<p class="item-title">{{ chineseOrEnglishName('资源申请') }}</p>
					<div class="item-content resources">
						<button
							v-for="item in linksResources"
							:key="item.id"
							:disabled="!item.link || hasJurisdiction(item)"
							:title="showItemRouterTooltip(item)"
							class="item-router"
							@click="goToPath(item, 'bottom')"
						>
							<template v-if="!!item.link && item.linkAuthFlag === 0">
								<el-tooltip class="item" effect="dark" :content="accessContent" placement="top">
									<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
								</el-tooltip>
							</template>
							<template v-else>
								<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
							</template>
						</button>
					</div>
				</div>
				<!-- /次屏资源申请 -->
			</div>
		</div>
		<!-- E 第二屏-分类导航 -->

		<!-- S 切换显示屏 -->
		<div ref="rChangeTab" class="change-tab">
			<div v-show="activeTab === 'bottom'" class="tab-top" @click="handleChangeTab('top')"></div>
			<div class="tab-line"></div>
			<div v-show="activeTab === 'top'" class="tab-bottom" @click="handleChangeTab('bottom')"></div>
		</div>
		<!-- E 切换显示屏 -->
	</section>
</template>

<script>
import Cookie from 'js-cookie'
import {
	getLinkList,
	visitRecord,
	userNameEncrypt,
	loginCheckSn,
	getUserNameFromToken,
	judgeAdmin,
	getdomains,
	getPlatformInfo,
	refreshToken
} from '@/api/home/url.js'
import { listData } from '@/api/system/dict/data.js'
import { mapGetters } from 'vuex'
import { getUserName,setUserName } from "@/utils/storage";
import { getDomain } from "@/utils/storage";
const publishPath = process.env.NODE_ENV === 'production' ? '/portal/' : '/'
const animationDir = location.hostname.includes('cypc.com.cn') ? 'animationIndex' : 'animationIndexDev'

export default {
	name: 'HomeIndex',

	data() {
		return {
			/** 当前页面是否中文 */
			isChinese: !(sessionStorage.getItem('language') === 'English'),

			/** 当前屏 */
			activeTab: 'top',

			/** 用户信息 */
			avatarUser: '',

			/** 新打开标签页 */
			myWindow: null,

			/** 显示隐藏目录列表 */
			showMenuToggle: false,

			/** 目录列表 */
			menuItemList: [
				{
					title: '高级应用',
					subtitle: 'Industrial Applications'
				},
				{
					title: '数据中台',
					subtitle: 'Data Middle Platform'
				},
				{
					title: '技术中台',
					subtitle: 'Technical Middle Platform'
				},
				{
					title: '业务中台',
					subtitle: 'Business Middle Platform'
				},
				{
					title: '管控中心',
					subtitle: 'Control Center'
				},
				{
					title: '资源申请',
					subtitle: 'Resource Application'
				}
			],

			applicationTypes: [
				{
					title: '智能运维',
					subtitle: 'Intelligent Operation'
				},
				{
					title: '智能检修',
					subtitle: 'Intelligent Maintenance'
				},
				{
					title: '智慧调度',
					subtitle: 'Intelligent Dispatching'
				},
				{
					title: '智能决策',
					subtitle: 'Intelligent Decision'
				},
				// {
				// 	title: '测试type1',
				// 	subtitle: 'Intelligent Decision1'
				// }
			],

			/** 当前首屏下部展开菜单 */
			activeMenu: {},

			/** 个人工作台链接数据 */
			linksWorkbench: [],

			/** 高级应用链接数据 */
			linksApplications: [],

			/** 技术中台链接数据 */
			linksTechnology: [],

			/** 业务中台链接数据 */
			linksBusiness: [],

			/** 数据中台链接数据 */
			linksData: [
				{
					link: '',
					cookie: '',
					subitemName: ''
				}
			],

			/** 云管控链接数据 */
			linksCloud: [],

			/** 资源申请链接数据 */
			linksResources: [],

			/** 显示跳过动画按钮 */
			showSkipAnimationBtn: false,

			/** 当前页面选中的电站 */
			currentDomainName: '公司',

			/** 公司厂站域名列表 */
			domainNameList: {},
			loginTimer:null
		}
	},

	computed: {
		...mapGetters(['stationName']),

		accessContent() {
			return this.isChinese ? '没有访问权限' : 'No access'
		},

		iframeSrc() {
			if (!!sessionStorage.getItem('animationPlayed')) {
				return `${window.location.protocol}//${window.location.host}${publishPath}${animationDir}/YMH_3_DG.html`
			}

			return `${window.location.protocol}//${window.location.host}${publishPath}${animationDir}/YMH_3.html`
		}
	},

	beforeCreate() {
		this.$EventBus.$emit('onIndexChangeTab', true)
	},

	mounted() {
		if (!location.hostname.includes('cypc.com.cn')) {
			this.handleSkipAnimation()
		}

		this.getDomainNameList()

		this.$EventBus.$on('onChangeLanguage', isChinese => {
			this.isChinese = isChinese
		})

		this.$EventBus.$on('onChangeStation', val => {
			this.currentDomainName = val !== '长江电力' ? val + '电站' : '公司'
			this.handleChangeTab('bottom')
		})

		window.addEventListener('message', this.handleMessage)

		if (!!sessionStorage.getItem('animationPlayed')) {
			this.menuImmediatelyShow()
		}
		this.loginTimer = setInterval(()=>{
			refreshToken()
		}, 1000 * 60 * 10)
	},

	beforeDestroy() {
		this.$EventBus.$off('onChangeLanguage')
		this.$EventBus.$off('onChangeStation')
		window.removeEventListener('message', this.handleMessage)
		clearInterval(this.loginTimer);
	},

	methods: {
		/** 处理动画传入的事件 */
		handleMessage(e) {
			if (e.data.type === 'changeStation') {
				if (e.data.data === this.stationName || this.stationName === '公司') {
					this.currentDomainName = e.data.data
					this.handleChangeTab('bottom')
				} else {
					this.$message.warning('没有权限')
				}
			} else {
				this.menuDelayShow()
			}
		},

		/**
		 * 切换显示屏
		 * @param {string} tab top-动画屏；bottom-菜单屏
		 */
		handleChangeTab(tab) {
			if (tab === 'top') {
				this.currentDomainName = '公司'
			}

			this.activeTab = tab
			this.$EventBus.$emit('onIndexChangeTab', tab === 'top')

			const sendVal =
				this.currentDomainName === '公司' ? '长江电力' : this.currentDomainName.replace('电站', '')

			this.$EventBus.$emit('onChangeActiveSubmenu', sendVal)
		},

		/** 鼠标移入展开首屏下部菜单 */
		handleMouseoverMenuItem(e) {
			if (e.target.className === 'menu-item' || e.target.className === 'menu-item active') {
				if (this.isChinese) {
					this.activeMenu = {
						title: e.target.childNodes[0].innerHTML,
						subtitle: e.target.childNodes[1].innerHTML
					}
				} else {
					this.activeMenu = {
						title: e.target.childNodes[1].innerHTML,
						subtitle: e.target.childNodes[0].innerHTML
					}
				}

				this.showMenuToggle = true
			} else if (e.target.className === 'menu-item-title') {
				if (this.isChinese) {
					this.activeMenu = this.menuItemList.find(item => item.title === e.target.innerHTML)
				} else {
					this.activeMenu = this.menuItemList.find(item => item.subtitle === e.target.innerHTML)
				}

				this.showMenuToggle = true
			} else if (e.target.className === 'menu-item-subtitle') {
				if (this.isChinese) {
					this.activeMenu = this.menuItemList.find(item => item.subtitle === e.target.innerHTML)
				} else {
					this.activeMenu = this.menuItemList.find(item => item.title === e.target.innerHTML)
				}

				this.showMenuToggle = true
			} else if (
				e.target.className === 'top-cont' ||
				e.target.className === 'fixed-bottom' ||
				e.target.className === 'menu-content'
			) {
				this.activeMenu = {}
				this.showMenuToggle = false
			}
		},

		/** 获取链接列表 */
		handleGetLinkList() {
			getLinkList().then(res => {
				if (res.code === 200) {
					this.linksWorkbench = []
					this.linksApplications = []
					this.linksTechnology = []
					this.linksBusiness = []
					this.linksData = []
					this.linksCloud = []
					this.linksResources = []
					this.$store.commit('SET_AUTH_LIST',res.data)
					res.data.forEach(item => {
						switch (item.menuName) {
							case '个人工作台':
								this.linksWorkbench.push(item)
								break
							case '高级应用':
								this.linksApplications.push(item)
								break
							case '技术中台':
								this.linksTechnology.push(item)
								break
							case '业务中台':
								this.linksBusiness.push(item)
								break
							case '数据中台':
								this.linksData.push(item)
								break
							case '管控中心':
								this.linksCloud.push(item)
								break
							case '资源申请':
								this.linksResources.push(item)
								break

							default:
								break
						}
					})
				} else {
					this.$message.error('获取连接列表失败！')
				}
			})
		},

		/** 开始动画 */
		startAnimation(time) {
			setTimeout(() => {
				// 通知顶部navBar开始动画
				this.$EventBus.$emit('onStartAnimation')

				// 执行过一次动画后设置标记
				sessionStorage.setItem('animationPlayed', 'animationPlayed')

				// 首屏底部菜单外框
				this.$refs.rTopMenu.style.height = '112px'

				// 首屏底部菜单顶线
				setTimeout(() => {
					this.$refs.rFixedLineTop.style.width = '98%'
				}, 1000)

				// 首屏底部菜单中间线
				setTimeout(() => {
					this.$refs.rFixedLineMiddle.style.width = '98%'
				}, 1200)

				// 首屏底部菜单分类项
				this.$refs.rMenuItem.forEach((item, index) => {
					setTimeout(() => {
						item.style.opacity = 1
					}, 1000 + index * 1000 * 0.2)
				})

				/** 右侧切换上下屏线条 */
				setTimeout(() => {
					this.$refs.rChangeTab.style.opacity = 1
				}, 1200)

				/** 动画结束隐藏跳过动画按钮 */
				setTimeout(() => {
					this.showSkipAnimationBtn = false
				}, 20000)
			}, time)
		},

		/** 跳过动画操作 */
		handleSkipAnimation() {
			const iframeUrl = `${window.location.protocol}//${window.location.host}${publishPath}${animationDir}/YMH_3_DG.html`

			document.getElementsByClassName('top-cont')[0].src = iframeUrl
			this.startAnimation(0)
			this.showSkipAnimationBtn = false
		},

		/** 完整展示动画时菜单延迟显示 */
		menuDelayShow() {
			this.showSkipAnimationBtn = true
			this.startAnimation(7500)
		},

		/** 不展示动画时菜单直接显示 */
		menuImmediatelyShow() {
			this.startAnimation(0)
		},

		/** 跳转到高级应用 */
		async goToPathRuoYi(link, cookieString, subitemName, item, position) {
			if (item.linkAuthFlag === 0) {
				return
			}

			await this.changeVisitRecord(subitemName)

			const key = cookieString.split(':')[0]
			const value = cookieString.split(':')[1]

			Cookie.remove(key, { domain: getDomain() })
			Cookie.set(key, value, { domain: getDomain() })
			Cookie.set('isFirst', 1, { domain: getDomain() })

			if (link.indexOf('http') != -1) {
				this.myWindow = window.open(link, link)
			} else {
				let url = ''

				if (Object.keys(this.domainNameList).length > 0) {
					this.domainNameList['公司'] = window.location.host

					if (position === 'bottom') {
						url =
							window.location.protocol + '//' + this.domainNameList[this.currentDomainName] + link
					} else {
						url = window.location.protocol + '//' + this.domainNameList['公司'] + link
					}

					this.myWindow = window.open(url, link)
				} else {
					this.$message.warning('域名列表数据获取失败，请重新操作')
					this.getDomainNameList()
				}
			}

			this.activeMenu = {}
			this.showMenuToggle = false
		},

		/** 跳转到非高级应用 */
		goToPath(item, position) {
			if (!item.link) {
				return
			}
			if (item.linkAuthFlag === 0) {
				return
			}

			// this.removeCookie()

			if (!!item.cookie) {
				var key = item.cookie.split(':')[0]
				var value = item.cookie.split(':')[1]

				Cookie.remove(key, { domain: getDomain() })
				if(value && value != 'undefined') {
					Cookie.set(key, value, { domain: getDomain() })
				}
			}
			this.activeMenu = {}
			this.showMenuToggle = false
			this.loginCheckSnAndSetCookies(item, position)
		},

		/** 切换当前应用 */
		changeVisitRecord(subitemName) {
			const userName = getUserName()
			this.$EventBus.$emit('changeVisitApp', subitemName)
			return new Promise(async(resolve,reject)=>{
				await visitRecord(userName, subitemName)
				resolve()
			})
		},
		newLoginCheckSnAndSetCookies() {
			this.domainNameList['公司'] = window.location.host

			const baseURL = `${window.location.protocol}//${this.domainNameList[this.currentDomainName]}${
				process.env.VUE_APP_AVATAR_APII
			}`
			console.log(this.avatarUser,'this.avatarUserthis.avatarUser')
			loginCheckSn(this.avatarUser, baseURL).then(res => {
				console.log(res,'zzzzzzzzzzzzzzz')
				if (res.statusCode == 0) {
					// this.changeVisitRecord(subitemName)

					Cookie.set('indexStyle', 'choose_new', { domain: getDomain() })
					Cookie.set('havaDataCollaboration', 'true', { domain: getDomain() })
					getUserNameFromToken().then(res => {
						if (res.statusCode == 0) {
							Cookie.set('avatarUserId', res.data.userId, { domain: getDomain() })
							setUserName(res.data.userName)
							Cookie.set('fullName', res.data.userFullName, { domain: getDomain() })
							// Cookie.set('avatarToken', Cookie.get('authorization'), {
							// 	domain: Cookie.get('cookieDomain')
							// })
						}
					})

					// judgeAdmin().then(res => {
					// 	if (res.statusCode == 0) {
					// 		Cookie.set('isAdmin', res.data, { domain: Cookie.get('cookieDomain') })
					// 	}
					// })

					getdomains().then(res => {
						if (res.statusCode == 0) {
							Cookie.set('domainid', res.data[0].domainid, { domain: getDomain() })
							// Cookie.set('domainname', res.data[0].domainname, {
							// 	domain: Cookie.get('cookieDomain')
							// })

							localStorage.setItem('workspaceList', JSON.stringify(res.data)) // 本地存储
						}
					})

					getPlatformInfo().then(res => {
						if (res.statusCode == 0) {
							Cookie.set('platform', res.data, { domain: getDomain() })
						}
					})
				} else {
					alert('登录失败')
				}
			})
		},
		/** 获取加密用户名 */
		getUserNameEncrypt() {
			const userName = getUserName()
			userNameEncrypt(userName).then(res => {
				if (res.code === 200) {
					this.avatarUser = res.msg
					this.newLoginCheckSnAndSetCookies()
				} else {
					this.$message.error('获取加密用户名失败')
				}
			})
		},

		/** 登录验证 */
		loginCheckSnAndSetCookies(item, position) {
			this.domainNameList['公司'] = window.location.host
			let link = item.link
			// 业务中台厂站侧时去掉标题栏
			if(item.menuName === '业务中台' && this.currentDomainName !== '公司') {
				link = item.cookie ? item.cookie : item.link;
			}
			const subitemName = item.subitemName
			const baseURL = `${window.location.protocol}//${this.domainNameList[this.currentDomainName]}${
				process.env.VUE_APP_AVATAR_APII
			}`
            // 跳转其它平台模块正常登出注释这里
			// loginCheckSn(this.avatarUser, baseURL).then(res => {
				// if (res.statusCode == 0) {
					this.changeVisitRecord(subitemName)

					Cookie.set('indexStyle', 'choose_new', { domain: getDomain() })
					Cookie.set('havaDataCollaboration', 'true', { domain: getDomain() })
					getUserNameFromToken().then(res => {
						if (res.statusCode == 0) {
							Cookie.set('avatarUserId', res.data.userId, { domain: getDomain() })
							setUserName(res.data.userName)
							Cookie.set('fullName', res.data.userFullName, { domain: getDomain() })
							// Cookie.set('avatarToken', Cookie.get('authorization'), {
							// 	domain: Cookie.get('cookieDomain')
							// })
						}
					})

					// judgeAdmin().then(res => {
					// 	if (res.statusCode == 0) {
					// 		Cookie.set('isAdmin', res.data, { domain: Cookie.get('cookieDomain') })
					// 	}
					// })

					getdomains().then(res => {
						if (res.statusCode == 0) {
							Cookie.set('domainid', res.data[0].domainid, { domain: getDomain() })
							// Cookie.set('domainname', res.data[0].domainname, {
							// 	domain: Cookie.get('cookieDomain')
							// })

							localStorage.setItem('workspaceList', JSON.stringify(res.data)) // 本地存储
						}
					})

					getPlatformInfo().then(res => {
						if (res.statusCode == 0) {
							Cookie.set('platform', res.data, { domain: getDomain() })
						}
					})

					if (link.indexOf('http') != -1) {
						window.open(link, '_blank')
					} else {
						const target = !!item.cookie ? '高级应用' : '_blank'
						let url = ''

						if (Object.keys(this.domainNameList).length > 0) {
							this.domainNameList['公司'] = window.location.host

							if (position === 'bottom') {
                const onlyTab = (item.menuName === '业务中台' && this.currentDomainName !== '公司') ? '?onlyTab=true' : ''
								url =
									window.location.protocol +
									'//' +
									this.domainNameList[this.currentDomainName] +
									link + onlyTab
							} else {
								url = window.location.protocol + '//' + this.domainNameList['公司'] + link
							}

							window.open(url, target)
						} else {
							this.$message.warning('域名获取错误，请重新操作')
							this.getDomainNameList()
						}
					}
				// } else {
				// 	alert('登录失败')
				// }
			// })
		},

		/** 清除cookie */
		removeCookie() {
			Cookie.remove('authorization', { domain: getDomain() })
		},

		/** 各个模块提示英文全称 */
		showItemRouterTooltip(item) {
			if (!this.isChinese && item.enSubitemName !== item.abbrEnSubitemName) {
				return item.enSubitemName
			} else {
				return ''
			}
		},

		/**
		 * 各模块跳转按钮显示中文还是英文名
		 * @param {object} item 各模块信息
		 */
		showItemRouterChOrEn(item) {
			return this.isChinese ? item.subitemName : item.abbrEnSubitemName
		},

		/**
		 * 第二屏模块类型中英文名称
		 * @param {string} name 模块中文名
		 */
		chineseOrEnglishName(name) {
			if (name === '个人工作台') {
				return this.isChinese ? name : 'Individual Workbench'
			}

			return this.isChinese ? name : this.menuItemList.find(item => item.title === name).subtitle
		},

		/** 获取公司电站域名列表 */
		getDomainNameList() {
			const queryParams = {
				pageNum: 1,
				pageSize: 10,
				dictName: '门户跳转电站域名',
				dictType: 'ymh_jump_ps_dns'
			}

			listData(queryParams).then(res => {
				if (res.code === 200) {
					res.rows.forEach(item => {
						this.domainNameList[item.dictLabel] = item.dictValue
					})

					this.handleGetLinkList()
					this.getUserNameEncrypt()
				} else {
					this.$message.error('获取公司电站域名列表失败')
				}
			})
		},

		/** 判断是否有模块权限 */
		hasJurisdiction(item) {
			if (this.currentDomainName === '公司') {
				return false
			}
		
			const stationList = !item.adscriptionPowerStation
				? []
				: item.adscriptionPowerStation.split(',')

			return !stationList.includes(this.currentDomainName)
		},

		/** 筛选高级应用的分类数据 */
		filterSUbtypes(index, isStation = false) {
			const applicationSubtypes = [
				['状态监视', '智能预警'],
				['状态评估', '检修决策','检修决策(新版)'],
				['故障诊断', '运行决策'],
				['经济运行', '辅助考核'],
			]

			if (this.currentDomainName === '葛洲坝电站' && isStation) {
				applicationSubtypes[3] = ['经济运行', '经济运行（建新）', '辅助考核']
			}
			// const linksApplications = this.linksApplications.filter(item=> item.subitemName !== '检修决策(新版)')
			const linksApplications = this.linksApplications
			// console.log('linksApplications',linksApplications);
			
			const list = linksApplications.filter(item =>
				applicationSubtypes[index].includes(item.subitemName)
			)
			// 模拟数据
			// let JSON_data1
			// if(list.length > 0){
			// 	 JSON_data1 = JSON.parse(JSON.stringify(list[list.length - 1] ))
			// 	JSON_data1.subitemName = '测试title1111111'
			// 	JSON_data1.id = Math.random()
			// 	list.push(JSON_data1)
			// }
			// let JSON_data2
			// if(list.length > 0){
			// 	 JSON_data2 = JSON.parse(JSON.stringify(list[list.length - 1] ))
			// 	JSON_data2.subitemName = '测试title2'
			// 	JSON_data2.id = Math.random()
			// 	list.push(JSON_data2)
			// }
		
			// console.log('list',list);
				
			return list
		}
	}
}
</script>

<style lang="scss" scoped>
.home-index {
	position: relative;
	font-family: '微软雅黑', 'Microsoft YaHei', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto,
		'SF Pro SC', 'SF Pro Display', 'SF Pro Icons', 'PingFang SC', Oxygen-Sans, Ubuntu, Cantarell,
		'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

	.my-span-sty {
		display: inline-block;
		width: 100%;
	}

	.content-top {
		position: relative;
		height: 100vh;
		margin-top: -122px;
		overflow: hidden;

		.btn-skip-animation {
			position: absolute;
			right: 20px;
			bottom: 132px;
			padding: 0 14px;
			width: 110px;
			height: 30px;
			line-height: 30px;
			background: url('~@/assets/images/home/skip_btn.png') no-repeat 80px center, #000;
			border-radius: 5px;
			font-size: 14px;
			font-family: Alibaba PuHuiTi;
			font-weight: 500;
			color: #fff;
			opacity: 0.5;
			cursor: pointer;

			&:hover {
				opacity: 1;
			}
		}

		.top-cont {
			width: 100%;
			height: 100%;
			background: #7bc6ff;
			overflow: hidden;
		}

		.top-menu {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 0;
			transition: 1s all;

			.menu-content {
				position: relative;
				background: linear-gradient(180deg, #2732ad, #13138a);
				z-index: 1;

				.fixed-box {
					display: flex;
					justify-content: space-around;
					align-items: center;
					margin: 0 80px;
					height: 78px;
					transition: 1s all;

					.menu-item {
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						padding-left: 52px;
						height: 50px;
						opacity: 0;
						transition: 0.5s all;
						cursor: pointer;

						.menu-item-title {
							position: relative;
							font-size: 20px;
							font-weight: bold;
							color: #00f2fe;
						}

						.menu-item-subtitle {
							position: relative;
							font-size: 12px;
							font-weight: 300;
							color: #3f64cc;
						}

						&:nth-of-type(1) {
							background: url('~@/assets/images/home/app_default.png') no-repeat left center;
						}

						&:nth-of-type(2) {
							background: url('~@/assets/images/home/data_default.png') no-repeat left center;
						}

						&:nth-of-type(3) {
							background: url('~@/assets/images/home/technology_default.png') no-repeat left center;
						}

						&:nth-of-type(4) {
							background: url('~@/assets/images/home/business_default.png') no-repeat left center;
						}

						&:nth-of-type(5) {
							background: url('~@/assets/images/home/cloud_default.png') no-repeat left center;
						}

						&:nth-of-type(6) {
							background: url('~@/assets/images/home/resources_default.png') no-repeat left center;
						}

						&.active {
							.menu-item-title,
							.menu-item-subtitle {
								color: #fff;
							}

							&:nth-of-type(1) {
								background: url('~@/assets/images/home/app_active.png') no-repeat left center;
							}

							&:nth-of-type(2) {
								background: url('~@/assets/images/home/data_active.png') no-repeat left center;
							}

							&:nth-of-type(3) {
								background: url('~@/assets/images/home/technology_active.png') no-repeat left center;
							}

							&:nth-of-type(4) {
								background: url('~@/assets/images/home/business_active.png') no-repeat left center;
							}

							&:nth-of-type(5) {
								background: url('~@/assets/images/home/cloud_active.png') no-repeat left center;
							}

							&:nth-of-type(6) {
								background: url('~@/assets/images/home/resources_active.png') no-repeat left center;
							}
						}
					}
				}

				.fixed-line-top,
				.fixed-line-middle {
					position: absolute;
					left: 1%;
					width: 0;
					height: 4px;
					transition: 1.2s all;
				}
			}

			.fixed-line-top {
				top: 0;
				background: linear-gradient(-90deg, rgba(32, 141, 225, 0), #7bc6ff, rgba(32, 141, 225, 0));
				box-shadow: 0px -5px 16px 0px rgba(8, 11, 34, 0.8);
			}

			.fixed-line-middle {
				top: 74px;
				background: linear-gradient(
					-90deg,
					rgba(32, 141, 225, 0),
					rgba(123, 198, 255, 0.6),
					rgba(32, 141, 225, 0)
				);
			}

			.fixed-bottom {
				margin: 0 auto;
				width: 98%;
				height: 34px;
				background: linear-gradient(-90deg, rgba(19, 25, 70, 0), #0c0f2c, rgba(19, 25, 70, 0));
			}

			.menu-toggle {
				position: absolute;
				bottom: 100px;
				left: 7.5%;
				width: 85%;
				// height: 0;
				border: none;
				border-radius: 20px 20px 0 0;
				overflow: hidden;
				transition: 0.5s height;
				display: none;

				&.active {
					display: block;
					min-height: 200px;
					border: 2px solid #daf5ff;
				}

				.toggle-title {
					height: 50px;
					line-height: 50px;
					background: linear-gradient(0deg, #09bbfe 0%, #5fd3ff 100%);
					color: #1c3e93;
				

					.title-big {
						margin-left: 38px;
						font-size: 20px;
						font-weight: bold;
					}

					.title-small {
						margin-left: 17px;
						font-size: 16px;
					}
				}

				.toggle-content {
					padding: 0 20px;
					min-height: 150px;
					background: linear-gradient(180deg, #099ffe 0%, #1d54d6 100%);

					.app-menu {
						display: flex;
						// justify-content: space-around;
						justify-content: flex-start;
						// justify-content: center;
						flex-wrap: wrap;
						padding-bottom:20px ;
						// background: linear-gradient(180deg, #099ffe 0%, #1d54d6 100%);

						.app-menu-wrap {
							width: 25% !important;
							padding: 0 20px;
							.menu-type {
								padding: 0 20px;
								margin-top: 21px;
								margin-bottom: 11px;
								width: 100%;
								height: 37px;
								line-height: 37px;
								background: #1e52e0;
								border-radius: 19px;
								font-size: 20px;
								font-family: Alibaba PuHuiTi;
								font-weight: 500;
								color: #ffffff;
								text-align: center;
							}

							.menu-title-wrap {
								display: flex;
								// justify-content: space-between;
								justify-content: center;
								flex-wrap: wrap;
								.menu-title{
									// width: 33.33%;
									box-sizing: border-box;
								}
							}
						}
					}

					.other-menu {
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						padding: 20px;
						height: 80%;

						.menu-title {
							margin: 4px 20px;
							min-width: 100px;
						}

						.menu-title-diff {
							padding: 10px 20px 10px 33px;
							background: #004892;

							&::before {
								top: 22px;
								left: 20px;
							}
						}
					}

					.menu-title {
						position: relative;
						padding-left: 20px;
						font-size: 20px;
						font-family: Alibaba PuHuiTi;
						font-weight: 500;
						text-align: left;
						color: #ffffff;
						background: transparent;
						border: none;
						border-radius: 20px;
						cursor: pointer;

						&::before {
							content: '';
							position: absolute;
							top: 50%;
							left: 7px;
							width: 6px;
							height: 6px;
							background-color: #fea71d;
							transform: translateY(-50%);
						}

						&:hover {
							color: #b9f1ff;
						}

						&:disabled {
							color: #666;
							cursor: no-drop;

							&::before {
								background-color: #666;
							}
						}
					}
				}
			}
		}
	}

	.content-bottom {
    position: absolute;
    top: -122px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		// height: calc(100vh - 122px);
    height: 100vh;
		padding: 122px 60px 20px;
    background: #FFF;

		.wrap-sec {
			display: flex;
			// box-shadow: 4px 4px 13px 0px rgba(0, 0, 0, 0.6);
			border-radius: 30px;

			.sec-title {
				display: flex;
				text-align: center;
				width: 60px;
				padding: 0 24px;
				// background-color: #2155ba; // 深色
				// color: #b8d3ed; // 深色
				// border: solid 2px #263d9a; // 深色
				background-color: #d8f0fc; // 浅色
				color: #fff; // 浅色
				border: solid 2px #d8f0fc; // 浅色
				align-items: center;
				border-radius: 30px 0px 0px 30px;
				font-size: 24px;
				line-height: 28px;
				word-break: break-all;
			}

			.sec-content {
				padding: 18px 30px;
				width: 100%;
				// background-color: rgba($color: #000, $alpha: 0.5); // 深色
				// border: solid 2px #263d9a; // 深色
				background-color: #eaf7fd; // 浅色
				border: solid 2px #eaf7fd; // 浅色
				border-left: none;
				border-radius: 0px 30px 30px 0px;

				.item-title {
					position: relative;
					height: 40px;
					padding-left: 40px;
					border-radius: 10px 10px 0px 0px;
					// background-image: linear-gradient(0deg, #003489 0%, #0055b4 100%),
					// 	linear-gradient(#3f9dfd, #3f9dfd); // 深色
          background-image: linear-gradient(0deg, #0c569d 0%, #72c4f3 100%),
	          linear-gradient(#3f9dfd, #3f9dfd); // 浅色
					color: #fff;
					font-size: 20px;
					line-height: 40px;

					&::before {
						content: '';
						position: absolute;
						left: 20px;
						top: 11px;
						width: 10px;
						height: 20px;
						// background-color: #0d0f66; // 深色
						background-color: #d8f0fc; // 浅色
						border-radius: 6px;
					}
				}

				.item-content {
					display: flex;
					justify-content: space-between;
					padding: 20px;
					// background-color: rgba($color: #000, $alpha: 0.5); // 深色
					// box-shadow: 4px 4px 13px 0px rgba(0, 0, 0, 0.6); // 深色
					// border: solid 2px #155392; // 深色
					background-color: #eaf7fc; // 浅色
					box-shadow: 4px 4px 13px 0px rgba(0, 0, 0, 0.2); // 浅色
					border: solid 1px #8abcdc; // 浅色
					border-top: none;
					border-radius: 0px 0px 10px 10px;
				}

				.item-router {
					display: block;
					width: 100%;
					height: 30px;
					// background-image: linear-gradient(0deg, #005ebe 0%, #137dea 100%),
					// 	linear-gradient(#0069d5, #0069d5); // 深色
					// box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.41); // 深色
					// border: solid 2px #1677dc; // 深色
					// color: #b3fcff; // 深色
					background-image: linear-gradient(0deg, #b6d4ee 0%, #fcfdff 100%),
	          linear-gradient(#0069d5, #0069d5); // 浅色
					box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.2);; // 浅色
					border: solid 1px #4a7b8c; // 浅色
					color: #333; // 浅色
					border-radius: 10px;
					font-size: 18px;
					cursor: pointer;

					&:hover {
						border-color: #0c9fbe;
					}
				}

				button:disabled.item-router {
					// background-image: linear-gradient(0deg, #013482 0%, #044bb8 100%),
					// 	linear-gradient(#0069d5, #0069d5); // 深色
					// border: solid 2px #004e9d; // 深色
					// color: #1b68db; // 深色
					background-image: linear-gradient(0deg, #b6d4ee 0%, #fcfdff 100%),
	          linear-gradient(#0069d5, #0069d5); // 浅色
					border: solid 1px #4a7b8c; // 浅色
					color: #999; // 浅色

					cursor: no-drop;
				}
			}
		}

		.sec-one {
			.item-content{
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				
			}
			.app-type {
				// flex: 1;
				width: 24.5%;
				padding: 10px 10px 20px;
			
				margin: 5px 0px;
				// margin: 10px;
				box-sizing: border-box;
				// background-color: #090e5b; // 深色
				// border: solid 1px #1a2189; // 深色
				background-color: rgba($color: #bee1f5, $alpha: .6); // 浅色
				border: solid 1px #eef3f7; // 浅色
				border-radius: 10px;
				&:nth-child(2n+1){
					margin-right: 0px;
				}

				.type-title {
					text-align: center;
					font-size: 20px;
					// color: #fff; // 深色
					color: #333; // 浅色
				}

				.type-wrap {
					display: flex;
					margin-top: 10px;
					// background-color: red;
					flex-wrap: wrap;
					justify-content: center;
					// justify-content: flex-start;	
					// box-sizing: border-box;
				}

				.item-router {
					width: 44%;
					height: 40px;
					font-size: 20px;
					box-sizing: border-box;
					margin: 10px;

					&:not(:first-child) {
						margin-left: 10px;
					}
				}

		

				// &:first-child {
				// 	margin-left: -10px;
				// }

				// &:last-child {
				// 	margin-right: -10px;
				// }

				// &.is-diff:last-child {
				// 	flex: 1.8;
				// }
			}
		}

		.sec-two {
      margin: 1vh 0;

			.sec-content {
				display: flex;
				justify-content: space-between;
			}

			.two-left-wrap {
				flex: 4.65;

				.item-content {
					flex-wrap: wrap;

					.item-router {
						width: calc(50% - 5px);
						margin-bottom: 13px;

						&:nth-child(2n) {
							margin-left: 10px;
						}

						&:last-child {
							width: 100%;
							margin-bottom: 0;
						}
					}
				}
			}

			.two-center-wrap {
				flex: 9.06;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin: 0 20px;

				.center-top-wrap {
					.item-content {
						flex-wrap: wrap;
						justify-content: flex-start;

						.item-router {
							width: calc(25% - 7.5px);
							margin-bottom: 30px;

							&:not(:nth-child(4n)) {
								margin-right: 10px;
							}

							&:nth-last-child(1),
							&:nth-last-child(2) {
								margin-bottom: 0;
							}
						}
					}
				}

				.center-bottom-wrap {
					.item-router {
						&:not(:nth-last-child(1)) {
							margin-right: 10px;
						}
					}
				}
			}

			.two-right-wrap {
				flex: 2.65;

				.item-content {
					flex-wrap: wrap;
					align-content: space-between;
					height: calc(100% - 40px);
				}
			}
		}

		.sec-three {
			.item-router + .item-router {
				margin-left: 20px;
			}
		}

    &.is-english {
      .wrap-sec .item-router {
        font-size: 14px;
      }
    }
	}

	.change-tab {
		position: absolute;
		top: 200px;
		right: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		opacity: 0;

		.tab-line {
			width: 2px;
			height: 430px;
			background-color: rgba(177, 177, 177, 0.25);
		}

		.tab-top {
			position: relative;
			width: 26px;
			height: 50px;
			cursor: pointer;
			background: url('~@/assets/images/home/arrow_top.png') no-repeat center top;

			&::after {
				content: '';
				position: absolute;
				top: 296px;
				left: 12px;
				width: 2px;
				height: 204px;
				background-color: rgba(177, 177, 177, 1);
			}
		}

		.tab-bottom {
			position: relative;
			width: 26px;
			height: 50px;
			cursor: pointer;
			background: url('~@/assets/images/home/arrow_bottom.png') no-repeat center bottom;

			&::before {
				content: '';
				position: absolute;
				bottom: 296px;
				left: 12px;
				width: 2px;
				height: 204px;
				background-color: rgba(177, 177, 177, 1);
			}
		}
	}
}
</style>
